import React from 'react';

import {inject,observer} from 'mobx-react';
import {toJS} from 'mobx';
import { withRouter } from 'react-router-dom';
import { TabPage } from 'weaver-mobile-page';
import { SearchBar, Tools, Icon } from 'weaver-mobile';
// import SearchList from './searchList.js';
import '../style'

const allStore =[
  'esearchStore',
]
const getLabel = Tools.getLabel;

@inject(...allStore)
@withRouter
@observer
export default class TopBar extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      show: false,
      searchBarType: getLabel(82857,'全部'),
      contentType: 'ALL',
      perORsysVisible: true,
      value: '',
      pIndex: 1,
      pagesize: 20,
      changeType:false,
      hideTitle: false,
    }
  }

  componentDidMount() {
  }

  componentWillUnmount() {
    sessionStorage.removeItem('esearchUrlParams');
  }

  componentWillReceiveProps(nextProps) {
  }

  resetSkipSearchParams = () => { // 重置跳转参数
    const { setParams } = this.props.esearchStore;
    setParams({
      skipSearchParams: {
        currentPage: 0,
        lastRealNumber: 0,
      }
    });
  }


  listVisible = () => {
    const { layout } = this.props.esearchStore;
    const { search } = this.props.location;
    this.props.history.push(`${layout.path}${search}`);
  }

  filterParams = () => {
    let { browserKeyArr, extraForm } = this.props.esearchStore;
    const formParams = extraForm.formParams;
    let search_json = { ...formParams };
    
    delete search_json.showorder;
    delete search_json.tagName;
    delete search_json.tagTitle;
    browserKeyArr = toJS(browserKeyArr);

    Object.keys(search_json).forEach(key => {
      let json = toJS(search_json[key]);
      if(typeof json === 'object') { // 过滤obj
        let objA = { ...search_json[key] };
        search_json = {
          ...search_json,
          ...objA
        };
      } 
      if(browserKeyArr.some(v => v === key)) {
        if(search_json[key] !== '') {
          search_json[key] = search_json[key].split(',');
        } else {
          delete search_json[key];
        }
      }

      browserKeyArr.forEach(v => {// 过滤浏览按钮span
        if(key.indexOf('span') > -1 && key.indexOf(v) > -1) {
          delete search_json[key];
        }
      });
 
      if(search_json[key] === '') {// 过滤''值
        delete search_json[key];
      }
    });
    if(search_json.CREATERID !== undefined && search_json.CREATERID !== '') {
      search_json = {
        ...search_json,
        CREATERID_select: '2'
      };
    }

    return search_json;
  }

  getExtraClick = () => {
    const { extraLayout, getAdvancedForm, tagParams } = this.props.esearchStore;
    const { search } = this.props.location;
    this.props.history.push(`${extraLayout.path}${search}`);
    // getAdvancedForm({ search_json: JSON.stringify(this.filterParams()), id: tagParams.key || '' }, () => {
    //   this.props.history.push(`${extraLayout.path}${search}`);
    // });
  }

  hasConditions = () => {
    let bool = false;
    const { extraForm, tagParams } = this.props.esearchStore;
    let formparams = extraForm.formParams;
    formparams = toJS(formparams);
    Object.keys(formparams).forEach(key => {
      let value = toJS(formparams[key]);
      if(typeof value === 'string' && value !== '') {
        bool = true;
      }
      if(typeof value === 'object') {
        Object.keys(value).forEach(k => {
          if(typeof k === 'string' && value[k] !== '') {
            bool = true;
          }
        });
      }
    });
    if(tagParams.key && tagParams.key != '') {
      bool = true;
    }

    return bool;
  }

  render() {
    let { contentType, setParams, topbarVisible,
      searchInputVal, onSearchClick, tabParams, clearExtraForm
    } = this.props.esearchStore;
    const { searchBarType,changeType } = this.state;
    //需要渲染模块名称
    if(changeType){
      const tempcontentType=this.state.contentType;
      contentType.forEach(element => {
        element=toJS(element)
        if(element.key===tempcontentType){
          this.setState({searchBarType:element.name,changeType:false});
        }
      });
    }
    contentType = toJS(contentType);
    const tabsVisible = topbarVisible;
    const tabProps = {
      onTabClick: (tab) => {
        const { setParams, onSearchClick, clearExtraForm, getAdvancedForm } = this.props.esearchStore;
        const { search } = this.props.location;
        setParams({ tabParams: tab, activeKey: tab.index, tagParams: {} });
        onSearchClick('enter', { contentType: tab.key }, this.props.history, search);
        // clearExtraForm();// 清空高级搜索数据
        getAdvancedForm();
      },
      page: tabParams.index
    };
    const advancedVisible = this.hasConditions();
    return (
        <div className="esearch-topbar">
          {tabsVisible && <div className="esearch-tabpage">
            <TabPage 
              tabs={contentType}
              btns={[<Icon type="arrow-down" onClick={() => { this.listVisible() }} />]}
              tabProps={tabProps}
            />
          </div>}
          <div className='esearch-bar-content' style={{ height: tabsVisible ? 'calc(100% - 45px)' : '100%' }}>
            <SearchBar
              className="search-select"
              placeholder={getLabel(383036,'请输入内容')}
              selectText={searchBarType}
              onChange={(value) => {
                setParams({ searchInputVal: value });
                // clearExtraForm();// 清空高级搜索数据
              }}
              onSubmit={(value) => {
                const { search, pathname } = this.props.location;
                if(value === '' && pathname === "/esearch") {
                  // 首页不搜索
                } else {
                  onSearchClick('enter', { keyword: value }, this.props.history, search);
                }
              }}
              // onSelectButtonClick={() => this.listVisible()}
              value={searchInputVal}
              showSelectButton={false}
              showExtraButton
              extraButton={[
                { 
                  key: 'advanced',
                  show: <Icon key="filter-o-hot" type={advancedVisible?'filter-o-hot':'filter-o'} onClick={this.getExtraClick} /> 
                },
              ]}
            />
          </div>
        </div>
    );
  }
}
